import { Tag} from 'antd'
import React, {useState, useEffect, memo} from 'react'
import styles from './index.less'
import CustomTable from '@/components/Table'
import SearchForm from '@/components/SearchForm'
import {getTableList} from '@/service/carMessage/maintenance'
import {maintenanceType} from '../../../dict'

const formItemLayout = {
	labelCol: {flex: '60px'},
	wrapperCol: {flex: '1'},
}
const Maintenance = memo((props: any) => {
	const {id} = props.data
	const [params, setParams] = useState({
		current: 1,
		size: 10,
	})

	const [total, setTotal] = useState(0)
	const [loading, setLoading] = useState(false)
	const [tableList, setTableList] = useState<any[]>([])
	const [searchData, setSearchData] = useState({})
	const [formData, setFormData] = useState<any[]>([])

	const columns: any = [
		{
			title: '工单ID',
			dataIndex: 'workOrderId',
			align: 'center',
			width: 200,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		{
			title: '司机姓名',
			dataIndex: 'driverName',
			align: 'center',
			width: 140,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		{
			title: '联系电话',
			dataIndex: 'driverMobile',
			align: 'center',
			width: 140,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		{
			title: '身份证号',
			dataIndex: 'driverCardNo',
			align: 'center',
			width: 140,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		{
			title: '本次里程',
			dataIndex: 'thisDistance',
			align: 'center',
			width: 140,
			render: (text: string) => <span>{text || '--'}</span>,
		},

		{
			title: '维保业务类型',
			dataIndex: 'maintenanceType',
			align: 'center',
			width: 140,
			render: (text: number, record: any) => (
				<>
					{text ? (
						<span>
							{maintenanceType?.map(
								(item: {key: number; label: string}) => {
									if (item?.key === text) {
										return (
											<Tag
												color="processing"
												key={record?.id}>
												{item?.label}
											</Tag>
										)
									}
									return ''
								},
							)}
						</span>
					) : (
						'--'
					)}
				</>
			),
		},
		{
			title: '维保店',
			dataIndex: 'maintenanceShop',
			align: 'center',
			width: 140,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		{
			title: '维保店城市',
			dataIndex: 'maintenanceCity',
			align: 'center',
			width: 140,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		{
			title: '送修人',
			dataIndex: 'repairPerson',
			align: 'center',
			width: 140,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		{
			title: '送修人电话',
			dataIndex: 'repairMobile',
			align: 'center',
			width: 140,
			render: (text: string) => <span>{text || '--'}</span>,
		},
	]
	const onFinish = (values: any) => {
		setSearchData(values)
	}
	const onReset = () => {
		setSearchData({})
	}

	useEffect(() => {
		const formItems: any[] = [
			{
				type: 'group',
				key: 'group1',
				groupItems: [
					{
						type: 'input',
						label: '维保店',
						name: 'maintenanceShop',
						key: 'maintenanceShop',
					},
					{
						type: 'input',
						key: 'repairPerson',
						name: 'repairPerson',
						label: '送修人',
					},
					{},
				],
			},
		]
		setFormData(formItems)
	}, [])

	// 获取维保记录
	const onListFun = () => {
		setLoading(true)
		getTableList({
			...params,
			...searchData,
			carId: id,
		})
			.then((res: any) => {
				if (res?.success) {
					setTableList(() => res?.data.records)
					setTotal(res?.data?.total)
				}
				setLoading(false)
			})
			.catch(() => {
				setLoading(false)
			})
	}

	useEffect(() => {
		onListFun()
	}, [params, searchData, id])

	return (
		<div className={styles.admittanceAdd}>
			<div className={`${styles.content} ${styles.formDetils}`}>
				<div className="search">
					<SearchForm
						onFinish={onFinish}
						onReset={onReset}
						formItems={formData}
						formLayout={formItemLayout}
					/>
				</div>
				<div className="btnlist" />
				<CustomTable
					columns={columns}
					pagination
					total={total}
					params={params}
					callback={(pagination: any) => {
						setParams(pagination)
					}}
					loading={loading}
					dataSource={tableList}
				/>
			</div>
		</div>
	)
})
export default Maintenance
